<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/pagination/examples" target="_blank">demos & documentation</a>
</m-notice>
<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleQuickAndEasyPopovers">
			<div class="m-section">
				<div class="m-section__content">
					<button type="button" class="btn btn-success" placement="right" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on right">
						Popover on right
					</button>&nbsp;
					<button type="button" class="btn btn-primary m-btn--wide" placement="top" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
						Popover on top
					</button>
					
					<div class="m-separator m-separator--dashed"></div>
					<button type="button" 
						class="btn btn-danger m-btn--wide" 
						placement="left" 
						ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." 
						popoverTitle="Popover on left">
						Popover on left
					</button>&nbsp;
					<button type="button" class="btn btn-info m-btn--wide" placement="bottom" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on bottom">
						Popover on bottom
					</button>
					
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleHTMLAndBindingsInPopovers">
			<div class="m-section">
				<div class="m-section__sub">
					Popovers can contain any arbitrary HTML, Angular bindings and even directives! Simply enclose desired content in a
					<code>&lt;ng-template&gt;</code> element.
				</div>
				<div class="m-section__content">
					<ng-template #popContent>
						<span>Hello</span>,
						<b>{{name}}</b>!
					</ng-template>
					<button type="button" class="btn btn-warning" [ngbPopover]="popContent" popoverTitle="Fancy content">
						I've got markup and bindings in my popover!
					</button>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleCustomAndManualTriggers">
			<div class="m-section">
				<div class="m-section__sub">
					You can easily override open and close triggers by specifying event names (separated by
					<code>:</code>) in the
					<code>triggers</code> property.
				</div>
				<div class="m-section__content">
					<button type="button" class="btn btn-primary" ngbPopover="You see, I show up on hover!" triggers="mouseenter:mouseleave" popoverTitle="Pop title">
						Hover over me!
					</button>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>

			<div class="m-section">
				<span class="m-section__sub">
					Alternatively you can take full manual control over popover opening / closing events.
				</span>
				<div class="m-section__content">
					<button type="button" class="btn btn-success" ngbPopover="What a great tip!" triggers="manual" #p="ngbPopover" (click)="p.open()" popoverTitle="Pop title">
						Click me to open a popover
					</button>&nbsp;
					<button type="button" class="btn btn-info" (click)="p.close()">
						Click me to close a popover
					</button>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleContextAndManualTriggers">
			<div class="m-section">
				<span class="m-section__sub">
					You can optionally pass in a context when manually triggering a popover.
				</span>
				<div class="m-section__content">
					<ng-template #popContent let-greeting="greeting">{{greeting}},
						<b>{{name1}}</b>!</ng-template>
					<p>
						How would you like to greet
						<strong [ngbPopover]="popContent" popoverTitle="Greeting" #p2="ngbPopover" triggers="manual">me</strong>?
					</p>
					<button type="button" class="btn btn-primary" (click)="changeGreeting({ greeting: 'Bonjour' })">
						French
					</button>&nbsp;
					<button type="button" class="btn btn-info" (click)="changeGreeting({ greeting: 'Gutentag' })">
						German
					</button>&nbsp;
					<button type="button" class="btn btn-success" (click)="changeGreeting({ greeting: 'Hello' })">
						English
					</button>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="examplePopoverVisibilityEvents">
			<div class="m-section">
				<div class="m-section__content">
					<button type="button" class="btn btn-primary" placement="top" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top" #popover="ngbPopover">
						Open Popover
					</button>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__sub">
					Popover is currently:
					<code>{{ popover.isOpen() ? 'open' : 'closed' }}</code>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="examplePopoverVisibilityEvents">
			<div class="m-section">
				<div class="m-section__sub">
					Set the
					<code>container</code> property to "body" to have the popover be appended to the body instead of the triggering element's parent. This option is useful if the element triggering the popover is inside an element that clips its contents (i.e.
					<code>overflow: hidden</code>).
				</div>
				<div class="m-section__content">
					<div class='row'>
						<div class='card'>
							<button type="button" class="btn btn-outline-info" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
								Default popover
							</button>
							<br />
							<button type="button" class="btn btn-outline-danger" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." container="body">
								Popover appended to body
							</button>
						</div>
					</div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfPopovers">
			<div class="m-section">
				<div class="m-section__content">
					<button type="button" class="btn btn-success" ngbPopover="This popover gets its inputs from the customized configuration" popoverTitle="Customized popover" placement="right" triggers="hover">
						Customized popover
					</button>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>